<template>
	<view :style="[ {'marginTop':mTOP+'px'},{'background':background},{'borderRadius':borderRadius+'px'}]"
		class="title-box">
		<view style="margin-left: 10px;">
			<img :src="img || 'https://yjgs.jsonbug.com/test/testtitle.png' "
				:style="[{'width':(width || 160)+'px','height':(height || 35)+'px'}]" />
		</view>
		<navigator open-type="navigate" hover-class="none" v-if="subTitle" :url="toUrl" style="margin-right: 10px;" :style="[{'color':color}]">
			<text class="mr-5">{{ subTitle }}</text>
			<text class="iconfont-yjgs ">&#xe697;</text>
		</navigator>
	</view>
</template>

<script>
	export default {
		name: 'extendHomeComb',
		props: {
			dataConfig: {
				type: Object,
				default: () => {}
			},
			merId: {
				type: String || Number,
				default: ''
			}
		},
		data() {
			return {
				toUrl:'',
				subTitle: '',
				img: '',
				mTOP: '',
				color: '#999',
				background: '',
				borderRadius: 0, //背景圆角
				width: 160,
				height: 35,
			}
		},
		methods: {
			setConfig(data) {
				if (!data) return
				this.subTitle = data.titleConfig.list[0].info[0]['value']
				this.img = data.titleConfig.list[0].img
				this.mTOP = data.mbConfig.val
				this.color = data.themeColor.color[0].item
				this.background = data.bgColor.color[0].item
				this.borderRadius = data.bgBrConfig.val
				this.width = data.imgWidth.val
				this.height = data.imgHeight.val
				this.toUrl = data.titleConfig.list[0].info[1].value;
			}
		},
		created() {
			this.setConfig(this.dataConfig)
			console.log(this.dataConfig, 'dataConfig')
		}
	}
</script>

<style lang="scss" scoped>
	.title-box {
		color: #282828;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>